<template>
  <div>
    <div class="urgency_person">
      <van-nav-bar
        title="联系人"
        right-text=""
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div>
      <img src="./images/urgency.png" alt="" style="width: 100%" />
      <p class="urgency_lian">
        添加3位以上你可以随时电话联系的朋友成为紧急联系人
      </p>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="phone_list">
        <div
          class="van-cell van-cell--center van-cell--borderless van-contact-card van-contact-card--edit"
          v-for="(item, index) in telArry"
          :key="index"
        >
          <i class="van-icon van-icon-contact van-cell__left-icon"></i>
          <div class="ur_left">姓名:{{ item.name1 }}</div>
          <div>电话:{{ item.phone }}</div>
        </div>
      </div>
    </van-pull-refresh>

    <div class="tel_bao">
      <div class="van-contact-list__bottom">
        <button
          class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"
          @click="showPopup"
        >
          <div class="van-button__content">
            <span class="van-button__text">新建联系人</span>
          </div>
        </button>
      </div>
    </div>
    <van-popup
      v-model="show"
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div
        class="van-popup van-popup--bottom"
        style="height: 50%; z-index: 2002"
      >
        <div class="van-contact-edit">
          <div
            class="van-contact-edit__fields"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="van-cell van-field">
              <div class="van-cell__title van-field__label">
                <span>姓名</span>
              </div>
              <div class="van-cell__value van-field__value">
                <div class="van-field__body">
                  <input
                    type="text"
                    placeholder="请填写姓名"
                    class="van-field__control"
                    v-model="item.name"
                  />
                </div>
              </div>
            </div>
            <div class="van-cell van-field">
              <div class="van-cell__title van-field__label">
                <span>电话</span>
              </div>
              <div class="van-cell__value van-field__value">
                <div class="van-field__body">
                  <input
                    type="tel"
                    placeholder="请填写电话"
                    class="van-field__control"
                    v-model="item.tel"
                    maxlength="11"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="van-contact-edit__buttons">
            <button
              class="van-button van-button--danger van-button--normal van-button--block van-button--round"
              @click="submit"
            >
              <div class="van-button__content">
                <span class="van-button__text">保存</span>
              </div></button
            ><button
              class="van-button van-button--default van-button--normal van-button--block van-button--round"
              @click="onReturn"
            >
              <div class="van-button__content">
                <span class="van-button__text">取消</span>
              </div>
            </button>
          </div>
        </div>
      </div>
    </van-popup>
    <br /><br /><br />
  </div>
</template>
<script>
// JS
import { reqTel, reqtel } from "../../api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      table: [],
      show: false,
      list: [
        {
          name: "",
          tel: "",
        },
      ],
      isLoading: false,
      editingContact: {},
      TelList: [],
      lian: [],
      telArry: [],
    };
  },
  computed: {
    ...mapState(["userlian"]),
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    onReturn() {
      this.$toast("取消成功");
      this.show = false;
    },
    async submit() {
      let name1;
      let phone;
      // 正则判断
      var reg_user = /^[\u4e00-\u9fa5]{2,4}$/;
      var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      for (let i = 0; i <= this.list.length - 1; i++) {
        name1 = this.list[i].name;
        phone = this.list[i].tel;
      }
      // 表单判断
      if (!reg_user.test(name1)) {
        this.$toast("请输入2-4位中文");
        return;
      } else if (!reg_tel.test(phone)) {
        this.$toast("请输入正确电话号码");
        return;
      }
      // 发送紧急联系人添加请求
      await reqTel({ name1, phone }).then((res) => {
        const userlian = res.data;
        this.table = res.data;
        // 将user保存到vuex的state
        this.$store.dispatch("recorduserlian", userlian);
        this.$toast(res.msg);
        // 关闭遮罩层
        this.show = false;
      });
    },
    //获取紧急联系人列表
    async telList() {
      await reqtel().then((res) => {
        this.telArry = res.data;
      });
    },
    // 返回上一级
    onClickLeft() {
      this.$router.replace("/");
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        this.telList();
        this.isLoading = false;
        this.$toast("刷新成功");
      }, 3000);
    },
  },
  created() {
    //获取紧急联系人列表
    this.telList();
  },
};
</script>
<style>
.urgency_person {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #ededed;
}
.back {
  position: absolute;
  left: 5px;
}
.urgency {
  position: relative;
  margin: 0 40%;
}
.urgency_ico {
  margin: 5px;
  width: 100%;
  height: 50px;
}
.icon-tianjia {
  font-size: 22px;
}
.list_tel {
  display: block;
  margin: 2% 0;
  height: 30px;
}
.urgency_lian {
  font-size: 14px;
  color: darkgray;
  text-align: center;
  margin: 4% 0 2%;
}
.icon-delete {
  margin: 0 3%;
  font-size: 16px;
  background-color: mediumseagreen;
  border-radius: 50%;
  color: #fff;
}
.tel_bao {
  text-align: center;
}
.van-cell__left-icon {
  height: 24px;
  font-size: 28px;
  line-height: 24px;
}
.van-contact-list__bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  padding: 0 16px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: transparent;
}
.ur_left {
  margin-right: 60px;
}
.van-nav-bar {
  background-color: #409eff !important;
}
</style>
